<template>
    <div id="pieChart"></div>
</template>

<script>
export default {
    data() {
        return {
            myChart: null, // echarts实例载体
        }
    },
    props: ['articleTypePieData','resizeOrNot'],
    watch: {
        articleTypePieData: {
            handler() {
                this.echartsInit()
            },
            deep: true
        },
        resizeOrNot: {
            handler() {
                this.myChart.resize()
            }
        }
    },
    methods: {
        // 初始化echarts
        echartsInit() {
            // 初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById('pieChart'))
            let option = {
                title: {
                    text: '博客类型图',
                    textStyle: {
                        fontSize: '20',
                        color: '#fff'
                    },
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                borderColor: '#202020',
                                borderRadius: 10,
                            },
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.articleTypePieData
                    },
                ]
            }
            this.myChart.setOption(option)
        }
    },
    mounted() {
        this.echartsInit()
    }
}
</script>

<style lang="scss" scoped>
#pieChart {
    height: 100%;
    width: 100%;
}
</style>